<template>
  <div class="current-place-show">
    <img :src="require('@static/images/start.png')"
         alt=""
         class="start_point" />
    <span>{{ fCityName }}</span>
    <span class="icont-vertical-show">
      <span class="current-device-icon">
        <img width="15"
             height="18"
             :src="require('@static/images/device.png')"
             alt="" />
        <i>{{ firstDevice }}</i>
      </span>
      <img :src="require('@static/images/arrow.png')"
           class="arrowSty"
           alt="" />
    </span>
    <span v-for="(address, index) in form.currentAddress"
          :key="index">
      <span>{{ address.stationName }}</span>
      <span class="icont-vertical-show">
        <span v-if="index === 0"
              class="current-device-icon flight-or-train">
          <img width="16"
               :src="require(`@static/images/${imgList[form.checkValue - 1]}`)" />
          <i>{{ form.secondDeviceCode }}</i>
        </span>
        <span v-else
              class="current-device-icon">
          <img width="15"
               height="18"
               :src="require('@static/images/device.png')"
               alt="" />
          <i>{{ form.thirdDeviceCode ? form.thirdDeviceCode : firstDevice }}</i>
        </span>
        <img :src="require('@static/images/arrow.png')"
             class="arrowSty"
             alt="" />
      </span>
    </span>
    <span>{{ tCityName }}</span>
    <img :src="require('@static/images/end.png')"
         alt=""
         class="end_point" />
  </div>
</template>

<script>
export default {
  name: "CurrentPlaceShow",
  props: {
    fromCityName: String,
    toCityName: String,
    firstDevice: String,
    formInfo: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      form: {},
      imgList: ["flight_black-1.png", "train_black_1.png", "device.png"]
    };
  },
  computed: {
    fCityName () {
      return this.fromCityName
    },
    tCityName () {
      return this.toCityName
    }
  },
  created () {
    this.form = this.formInfo;
  }
};
</script>

<style lang="scss" scoped>
.current-place-show {
  padding-top: 45px;
  .start_point,
  .end_point {
    vertical-align: middle;
  }
  .start_point {
    margin-right: 5px;
  }
  .end_point {
    margin-left: 5px;
  }
  span {
    color: var(--prev-color-text-black);
    font-size: 16px;
    &.icont-vertical-show {
      position: relative;
      margin: 0 5px;
    }
  }
  .current-device-icon {
    position: absolute;
    top: -10px;
    left: -18px;
    display: flex;
    align-items: center;
    > img {
      display: inline-block;
      margin-left: 21px;
      width: 13px;
      height: 15px;
    }
    > i {
      font-style: normal;
      display: block;
      margin-top: -3px;
      line-height: 12px;
      font-size: 12px;
      color: #606060;
      width: 60px;
      text-align: center;
    }
  }
  .arrowSty {
    width: 95px;
  }
}
</style>
